<template>
  <div class="root-detail">
    <img class="pic" src="@/assets/imgs/con2/b2.png" />
    <div class="title">{{ data.title }}</div>
    <div class="tip">{{ data.tip }}</div>
    <div class="control">
      <div class="item">
        <div class="name">杯型</div>
        <ul>
          <li>中杯</li>
          <li>大杯</li>
          <li>超大杯</li>
        </ul>
      </div>

      <div class="item">
        <div class="name">温度</div>
        <ul>
          <li>去冰</li>
          <li>加冰</li>
          <li>热</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const list = ref([{ id: 1, title: "一杯柠檬水儿", tip: "甘甜，鲜榨" }]);

const data = computed(() => {
  return list.value.find((item) => item.id == route.params.id);
});
</script>

<style lang="less" scoped>
.root-detail {
  min-height: 100vh;
  background-color: #f7f7f7;
  .pic {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    view-transition-name: pic;
  }
  .title {
    box-sizing: border-box;
    font-size: 0.48rem;
    padding: 0.2rem;
    width: fit-content;
  }
  .tip {
    box-sizing: border-box;
    font-size: 0.14rem;
    color: #aaa;
    padding: 0.1rem 0.2rem 0.2rem;
  }
  .control {
    .item {
      & + .item {
        margin-top: 0.2rem;
      }

      .name {
        padding: 0.1rem 0.2rem;
      }
    }

    ul {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 0.2rem;
      justify-content: center;

      & > li {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.32rem;
        background-color: #fff;
        border-radius: 0.04rem;
      }
    }
  }
}
</style>
